<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Insert title here</title>
<%@ include file="/WEB-INF/base/head.jsp"%>
<link href="<c:url value="/static/bootstraptable/bootstrap-table.min.css"/>" rel="stylesheet">
<%@ include file="/WEB-INF/base/footer.jsp"%>
 	<script src="<c:url value="/static/bootstraptable/bootstrap-table.min.js"/>"></script>
 	<script src="<c:url value="/static/bootstraptable/bootstrap-table-zh-CN.min.js"/>"></script>
 	<script src="<c:url value="/static/echart/echarts.min.js"/>"></script>
 	<script src="<c:url value="/static/echart/infographic.js"/>"></script>
<script type="text/javascript">

</script>
</head>
<body>
	<div class="row"> 
		<div class="col-lg-4"><div id="main1" style="height:200px"></div></div>
		<div class="col-lg-4"><div id="main2" style="height:200px"></div></div>
		<div class="col-lg-4"><div id="main3" style="height:200px"></div></div>
	</div>
	<div class="row"> 
		<div class="col-lg-5"><div id="main4" style="height:200px"></div></div>
		<div class="col-lg-7"><div id="main5" style="height:200px"></div></div>
	</div>
	
	<div style="padding: 10px;">
	<div id="toolbar">
		<div class="row">
			<div class="col-md-3">
				<div class="input-group">
					<span class="input-group-addon">开始时间：</span> <input id="stratTime" type="date"
						class="form-control">
				</div>
			</div>
			<div class="col-md-3">
				<div class="input-group">
					<span class="input-group-addon">截止时间：</span> <input id="endTime" type="date"
						class="form-control">
				</div>
			</div>
			<div class="col-md-3">
				<div class="input-group">
					<span class="input-group-addon">类型：</span> <select id="articletype" type="text"
						class="form-control">
							<option value="">所有</option>
							<option value="">毕业生问卷</option>
							<option value="">社会人员问卷</option>
						</select>
				</div>
			</div>
			
			<div class="col-md-3">
				<a  class="btn btn-primary" onclick="searchArticle()" >查询</a>
			</div>
		</div>
	</div>
	<table id="table"></table>
	
	</div>
		
</body>
<script type="text/javascript">
var myChart1 = new Object(); 
var myChart2 = new Object();
var myChart3 = new Object();
var myChart4 = new Object();
var myChart5 = new Object();
$(function(){
	myChart1 = echarts.init(document.getElementById('main1')); 
	myChart2 = echarts.init(document.getElementById('main2')); 
	myChart3 = echarts.init(document.getElementById('main3')); 
	myChart4 = echarts.init(document.getElementById('main4')); 
	myChart5 = echarts.init(document.getElementById('main5')); 
	myChart1.setOption(option1); 
	myChart2.setOption(option2); 
	myChart3.setOption(option3); 
	myChart4.setOption(option4); 
	myChart5.setOption(option5);
	   //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();
});



var option1 = {
        tooltip: {
            show: true
        },
        legend: {
            data:['您的专业？']
        },
        xAxis : [
            {
                type : 'category',
                data : ["软件工程","信息技术","电子","其它"]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
             {
                "name":"您的专业？",
                "type":"bar",
                "data":[0, 0, 0, 0]
            } 
        ]
    };

var option2 = {
        tooltip: {
            show: true
        },
        legend: {
            data:['工作中主要使用的语言？']
        },
        xAxis : [
            {
                type : 'category',
                data : ["A.java","B.c++","C.c","D.c#","E.golang","F.其它"]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                "name":"工作中主要使用的语言？",
                "type":"bar",
                "data":[0, 0, 0, 0, 0, 0]
            }
        ]
    };
    
var option3 = {
        tooltip: {
            show: true
        },
        legend: {
            data:['从事的主要工作内容？']
        },
        xAxis : [
            {
                type : 'category',
                data : ["A.软件开发","B.硬件开发","C.系统运维","D.IT运维","E.其它"]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                "name":"从事的主要工作内容？",
                "type":"bar",
                "data":[0, 0, 0, 0, 0]
            }
        ]
    };
    
    
var option4 = {
        tooltip: {
            show: true
        },
        legend: {
            data:['您觉得现在什么语言前景比较好？']
        },
        xAxis : [
            {
                type : 'category',
                data : ["java","golang","object-C","python","c++","C","C#","else"]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                "name":'您觉得现在什么语言前景比较好？',
                "type":"bar",
                "data":[0, 0, 0, 0, 0, 0, 0,0]
            }
        ]
    };
    
    
var option5 = {
        tooltip: {
            show: true
        },
        legend: {
            data:['现在需要掌握哪些技能？']
        },
        xAxis : [
            {
                type : 'category',
                data : ["WEB前端","nosql","大数据","AI","桌面开发","手机开发","服务器后台","中间件"]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                "name":"现在需要掌握哪些技能？",
                "type":"bar",
                "data":[0, 0, 0, 0, 0, 0,0,0]
            }
        ]
    };
    



var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#table').bootstrapTable({
            url: '<c:url value="/question/queryList.htm"/>',         //请求后台的URL（*）
            method: 'post',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber : 1 ,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10,25,50,100],        //可供选择的每页的行数（*）
            strictSearch: true,
            clickToSelect: true,                //是否启用点击选中行
            //height: 460,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [{
            	field: 'Number',
                title: '序号',
                formatter: function (value, row, index) {
                    return index+1;
                }
            }, {
                field: 'question_1',
                title: '问题1'
            }, {
                field: 'question_2',
                title: '问题2'
            },  {
                field: 'question_3',
                title: '问题3'
            },  {
                field: 'question_4',
                title: '问题4'
            }, {
                field: 'question_5',
                title: '问题5'
            }, {
                field: 'created_name',
                title: '文章类型'
            }, {
                field: 'created_phone',
                title: '电话'
            }, {
                field: 'created_age',
                title: '年龄'
            }, {
                field: 'created_sex',
                title: '性别'
            }/* ,  {
                field: 'op',
                title: '操作',
                formatter: function (value, row, index) {
                	var button_publish = '<a href="javascript:publishArticle(\''+row.article_id+'\')">发布</a>';
                	var button_update = '<a href="<c:url value="/article/addOrUpdateArticlePage?article_id="/>'+row.article_id+'" target="_blank">修改</a>';
                	var button_delete = '<a>删除</a>';
                    return button_publish+"&nbsp;&nbsp;"+button_update+"&nbsp;&nbsp;"+button_delete;
                }
            } */]
        });
    };

    //得到查询的参数
  oTableInit.queryParams = function (params) {
    	
    	
    	
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            sdate: $("#stratTime").val(),
            edate: $("#endTime").val(),
            type: $("#articletype").val()
        };
        $.ajax({
    		type : 'post',
    		url : "<c:url value='/question/queryEchart.htm'/>",
    		data :{   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                sdate: $("#stratTime").val(),
                edate: $("#endTime").val(),
                type: $("#articletype").val()
            },
    		dataType:'json', 
    		success : function(data) {
    			option1.series[0].data = data.question1;
    			option2.series[0].data = data.question2;
    			option3.series[0].data = data.question3;
    			option4.series[0].data = data.question4;
    			option5.series[0].data = data.question5;
    			
    			myChart1.setOption(option1);
    			myChart2.setOption(option2);
    			myChart3.setOption(option3);
    			myChart4.setOption(option4);
    			myChart5.setOption(option5);
    		}
    	});
        
        return temp;
    };
    return oTableInit;
};

function searchArticle(){
	$('#table').bootstrapTable("refresh");
}

</script>
</html>

